<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .vote-item {
            border: 2px solid #ccc;
            padding: 15px 5px;
            margin: 10px auto;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 这个无法解析html结构 -->
            <!-- <h4>{{title}}</h4> -->
            <h4 v-html="title"></h4>
            <h5>总票数:{{totalCount}}</h5>

            <!-- vote是一条条的这样的数据{name:"猪志祥",count:0} -->
            <!-- @vote1="totalCount++",监听这个投票事件 -->
            <vote-item v-for="vote in voteList" :key="vote.name" 
            :total-count="totalCount" v-bind="vote" @vote1="onVote"></vote-item>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        Vue.component("MyProgress",{
            // type自己是可以直接用直接props中的默认值的
            template: `<div class="progress">
                            <div class="progress-bar" :class="['progress-bar-' + type ,{'progress-bar-striped':striped}]"
                            role="progressbar" aria-valuenow="0" 
                            aria-valuemin="0" aria-valuemax="100" :style="{minWidth: '2em',width: percent}">
                            {{percent}}
                            </div>
                        </div>`,
            props:{
                percent:{
                    type: String,
                    default: "0%"
                },
                type:{
                    type:String,
                    default: "success",
                    validator(val){
                        // 如果传进来的val满足条件就传出去
                        return ["success","danger","info","warning"].indexOf(val) !== -1
                    }
                },
                striped:{
                    type: Boolean,
                    default: false
                }
            }

        })
        Vue.component("VoteItem", {

            // 主要的思路就是我父组件传递数据，然后我子组件通过props接受父组件传过来的数据，最后可以在自己的template中的结构进行使用
            // <my-progress :percent="percent"/>  我的父组件里面有一个percent的函数可以直接执行，表示我取到了数据
            // 然后就是"percent"第二个，然后我的第一个percent就有值了，然后再用props接收这个数据，然后就可以使用了在template

            // type可以传静态值
            template: `<div class="vote-item">
                            <p><strong>{{name}}</strong>: {{count}}</p>

                            <my-progress :percent="percent" :striped="true" type="info"/>

                            <button class="btn btn-success" @click="$emit('vote1',name)">投{{name}}一票</button>
                        </div>`,//vote1,自定义事件
            props: {
                name: {
                    type: String,
                    required: true,
                },
                count: {
                    type: Number,
                    required: true, //已经要求了必须传参数，写了默认值也没有用
                },
                totalCount: {
                    type: Number,
                    required: true,
                },
            },
            // 只要数据发生了变化，对应的依赖也会重新计算,反之进行缓存的取舍
            computed: {
                percent() {
                    // 把数字转换为字符串，结果的小数点后有指定位数的数字
                    // 先乘100再转换成字符串
                    // console.log(this.name);
                    // 想看this是不是指向实例，就打印this,需要在模板了运行一下，就在template里面写一下{{percent}}
                    // console.log(this);
                    return this.totalCount > 0 ? ((this.count / this.totalCount)*100).toFixed(2) + "%" : "0%";
                  
                }

            }
        })



        var vm = new Vue({
            el: "#app",
            data: {
                totalCount: 0,
                voteList: [{
                    name: "猪志祥",
                    count: 0
                }, {
                    name: "李日晨",
                    count: 0
                }, {
                    name: "陈爱迪",
                    count: 0
                }, {
                    name: "陈小贤",
                    count: 0
                }],
                title: "<del>大猪蹄子</del>  时间管理大师评选"
            },
            methods:{
                onVote(name){
                    // 如果上面点击的name刚好等于voteList中的name,也就是为true,就返回那个那个正确的name
                    var item = this.voteList.find(item => item.name === name);
                    // 如果发现item有值，就让item中的count++
                    // item && item.count++;
                    // this.totalCount++

                    if(item){
                        // 这个加的是vm实例中的count
                        item.count++;
                         // 这个加的是vm实例中的totalCount
                        this.totalCount++
                    }

                }
            }
        })
    </script>
</body>

</html>